<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大麦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        [v-cloak] {
            display: none;
        }
        
        .menu {
            display: flex;
            padding: 10px 10px;
        }
        
        .menu li {
            padding: 10px 30px;
            cursor: pointer;
            border-radius: 5px;
            user-select: none;
        }
        
        .active {
            background-color: orangered;
            color: #eeeeee;
        }
        
        .show li {
            padding: 20px 10px;
            display: flex;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak style="width: 100%;height: 100%;">
        <div style="width: 1000px;margin: 100px auto;border: 1px solid red;padding: 10px 10px;">
            <div class="menu">
                <li style="cursor: default;">城市:</li>
                <li :class="{active:i===acitvecityid}" @click="acitvecityid=i" v-for="(item,i) in citylist">
                    {{item.name}}
                </li>
            </div>
            <div class="menu">
                <li style="cursor: default;">类型:</li>
                <li :class="{active:i===activetypeid}" @click="activetypeid=i" v-for="(item,i) in typelist">
                    {{item.name}}
                </li>
            </div>

            <h1>11</h1>

            <ul class="show">
                <li v-for="item in showlist">
                    <a :href="item|gethref" target="_blank"><img :src="item.verticalPic" width="150px" height="200px"></a>

                    <div>
                        <div>{{item.name}}</div>
                        <div>{{item.description}}</div>
                    </div>
                </li>
            </ul>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            filters: {
                gethref(item) {
                    return "deatil.html?id=" + item.id
                }
            },
            methods: {
                async getdatalist() {
                    let cityid = this.citylist[this.acitvecityid].id
                    let typeid = this.typelist[this.activetypeid].id
                    let res = await axios.get("show.json")
                    let arr = res.data

                    if (cityid) {
                        arr = arr.filter(r => r.cityid === cityid)
                    }
                    if (typeid) {
                        arr = arr.filter(r => r.categoryid === typeid)
                    }
                    //console.log(arr)
                    this.showlist = arr
                },

            },
            watch: {
                acitvecityid() {
                    this.getdatalist()
                },
                activetypeid() {
                    this.getdatalist()
                }
            },
            created() {
                this.getdatalist()
            },
            data() {
                return {
                    citylist: [{
                        id: 0,
                        name: '全部'
                    }, {
                        id: 1,
                        name: '南京'
                    }, {
                        id: 2,
                        name: '上海'
                    }, {
                        id: 3,
                        name: '重庆'
                    }],
                    typelist: [{
                        id: 0,
                        name: '全部'
                    }, {
                        id: 1,
                        name: '演唱会'
                    }, {
                        id: 2,
                        name: '戏剧'
                    }, {
                        id: 3,
                        name: '体育比赛'
                    }],
                    acitvecityid: 0,
                    activetypeid: 0,
                    showlist: []
                }
            },
        })
    </script>
</body>

</html>